
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区:">
            <el-select
              v-model="filters.CID"
              filterable
              placeholder="请选择"
              @keydown.enter.native="refreshPageRequest(1)"
              @change="refreshPageRequest(1)"
              clearable
            >
              <el-option
                v-for="item in villageList"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起始时间：">
            <el-date-picker
              v-model="startTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="endTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery('a')">查询</el-button>
            <el-button
              type="primary"
              @click="handleDownload({})"
              v-show="hasPerm('party:story:add')"
            >导出excel</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            prop="health_image"
            label="健康码"
            width="100px"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <img
                :src="getItemPhoto(scope.row.health_image)"
                :onerror="$errorImgUrl"
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center"></el-table-column>
          <el-table-column prop="tel" label="手机号" align="center"></el-table-column>
          <el-table-column prop="addr" label="家庭住址" align="center"></el-table-column>
          <el-table-column prop="start_addr" label="出发地址" align="center"></el-table-column>
          <el-table-column prop="leave_time" label="出发时间" align="center"></el-table-column>
          <el-table-column prop="arrive_time" label="抵达时间" align="center"></el-table-column>
          <el-table-column prop="traffic_type" label="交通方式" align="center"></el-table-column>
          <el-table-column prop="tbaddress" label="填报地址" align="center"></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button type="primary" @click="handleAdd(scope.row)">详情</el-button>
              <el-button type="danger" @click="handleremove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <el-dialog
      class="dialog-container"
      :title="title"
      :visible.sync="addVisible"
      :modal-append-to-body="false"
    >
      <addvote v-if="addVisible" :data="dataForm" @handleSave="handleSave" @closeEdit="closeEdit"></addvote>
    </el-dialog>
  </div>
</template>

<script>
import addvote from './addvote'
export default {
  components: {
    addvote
  },
  data() {
    return {
      errorImg: 'this.src="' + require('@/assets/imgs/houtai/wutu.png') + '"', //默认图片
      loading: true,
      title: '详情',
      // 弹框
      dialogTableVisible: false,
      tableData: [],
      asideShow: false,
      unitShow: false,
      pageResult: [],
      pageResultall: [],
      getCommunity: [],
      filters: {
        CID: ''
      },
      startTime: '',
      endTime: '',
      pageRequest: {
        page: 1,
        limit: 10
      },
      columns: [],
      loading: false,
      totalSize: 0,
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      editVisible: false,
      addVisible: false,
      dictList: {}
    }
  },
  async mounted() {
    this.dictList = JSON.parse(sessionStorage.getItem('dictData'))
    this.handleQuery()
    this.getCommunityList()
    this.organizeMix = await this.getOrganizeMix()
  },
  methods: {
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + 'avatar/' + id
      return url
    },
    async handleDownload() {
      let that = this
      await this.handleAll()
      this.downloadLoading = true
      let headers = ['姓名', '手机号', '家庭住址', '出发地址', '出发时间', '抵达时间', '交通方式']
      // import('@/vendor/Export2Excel').then(excel => {
      //   const tHeader = headers
      //   const filterVal = ['name', 'tel', 'addr', 'start_addr', 'leave_time', 'arrive_time', 'traffic_type']
      //   const list = that.pageResultall
      //   const data = this.formatJson(filterVal, list)
      //   excel.export_json_to_excel({
      //     header: tHeader,
      //     data,
      //     filename: '返回填报'
      //   })
      //   this.downloadLoading = false
      // })
    },
    formatJson(filterVal, jsonData) {
      console.log(jsonData)
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    //获取小区
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList
    },
    //列表全部导出
    handleAll() {
      let param = {
        startTime: this.startTime,
        endTime: this.endTime,
        page: 1,
        limit: 200,
        CID: this.filters.CID
      }
      this.loading = true
      this.$api.wxNotic.sys_people_get(param).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.pageResultall = res.data
          this.pageResultall.map(item => {
            item.insert_time = this.$format(item.insertTime)
          })
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    // 查询列表
    handleQuery(val) {
      let param = {
        startTime: this.startTime,
        endTime: this.endTime,
        page: this.pageRequest.page,
        limit: this.pageRequest.limit,
        CID: this.filters.CID
      }
      this.loading = true
      this.$api.wxNotic.sys_people_get(param).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.pageResult = res.data
          this.totalSize = res.count
          this.pageResult.map(item => {
            item.insert_time = this.$format(item.insertTime)
          })
        } else {
          this.$message({ message: '操作失败, ' + res.msg, type: 'error' })
        }
      })
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + 'avatar/' + id
      return url
    },

    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val
      this.handleQuery()
    },
    // 新增
    handleAdd(row) {
      this.title = '详情'
      this.dataForm = JSON.parse(JSON.stringify(row))
      this.addVisible = true
      this.operation = true
    },
    handleSave: function() {
      this.editVisible = false
      this.addVisible = false
      this.handleQuery()
    },
    /* 保存成功关闭编辑弹窗 */
    closeEdit: function() {
      this.editVisible = false
      // this.handleQuery()
      //设置重新加载路由及资源
      // store.commit("menuRouteLoaded", false)
    },
    handleremove(row) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.loading = true
        let params = { _id: row._id, dbName: 'people_reback_register' }
        this.$api.wxNotic.remove_every(params).then(res => {
          if (res.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.handleQuery()
          } else {
            this.$message({
              message: '操作失败, ' + res.msg,
              type: 'error'
            })
          }
        })
      })
    }
    /* 取消编辑 */
    // handleCancel: function () {
    //   this.editVisible = false;
    // },
  }
}
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}
</style>
